<!--
 * @Author: your name
 * @Date: 2021-09-01 16:03:37
 * @LastEditTime: 2021-09-19 18:25:00
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \bigdate\src\views\admin\componentsPage\chartsPage.vue
-->
<template>
    <Card :loading="loading">
        <template #title>
            <div class="title">
                <div>{{ title }}</div>
                <div v-if="tag">
                    <Tag :color="tagcolor">
                        {{ tag }}
                    </Tag>
                </div>
            </div>
        </template>
        <div
            class="echarttemp"
            :style="{
                width: '100%',
                height: !tempload ? parseInt(height) - 100 + 'px' : '30px',
            }"
        >
            <div
                ref="chartRef"
                :style="{ width: '100%', height: parseInt(height) - 100 + 'px' }"
            ></div>
        </div>
    </Card>
</template>
<script lang="ts">
/**
 * 通用模板
 * 注意！ 注意！ 注意！ 使用该组件 必须设置loading不然 不会渲染
 */
import {
    computed,
    defineComponent,
    PropType,
    Ref,
    ref,
    unref,
    watch,
} from 'vue'

import { Card, Tag } from 'ant-design-vue'
import { useECharts } from '../../ntils/hooks'

export default defineComponent({
    components: { Card, Tag },
    props: {
        loading: Boolean,
        width: {
            type: String as PropType<string>,
            default: '400px',
        },
        height: {
            type: String as PropType<string>,
            default: '400px',
        },
        title: {
            type: String,
            default: () => '标题',
        },
        datas: {
            type: Object as PropType<Object>,
        },
        tag: {
            type: String,
        },
        tagcolor: {
            type: String,
            default: () => 'pink',
        },
    },
    setup(props) {
        const chartRef = ref<HTMLDivElement | null>(null)
        // 监听loading 然后加载数据
        watch(
            () => props.loading,
            () => {
                if (props.loading) {
                    return
                }
                setTimeout(() => {
                    initEcharts()
                }, 30)
            },
        )
        // 利用vue3.0新特性 监听数据变化
        watch(
            () => props.datas,
            () => {
                initEcharts()
            },
        )
        // 收缩动画
        let tempload = ref()
        tempload.value = true
        // 初始化图表
        const initEcharts = () => {
            if (props.loading) return
            const dome = computed(() => unref(chartRef.value))
            const { setOptions } = useECharts(dome.value as Ref<HTMLDivElement>)
            setOptions(props.datas)
            tempload.value = false
        }
        return { chartRef, tempload }
    },
})
</script>
<style lang="less" scoped>
.title {
  font-size: 13px;
  font-weight: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.echarttemp {
  width: 100%;
  min-height: 30px;
  overflow: hidden;
  transition: all 0.3s ease 0s;
}
</style>
